<!--
 * @Descripttion: 
 * @version: 
 * @Author: hejiajun
 * @Date: 2021-08-14 10:52:36
 * @LastEditors: hejiajun
 * @LastEditTime: 2021-11-02 16:47:12
-->
<template>
    <a-config-provider :locale="locale">
        <div class="public-wrap">
            <!-- 公用头部 -->
            <router-view v-slot="{ Component }">
                <keep-alive :include="includeList">
                    <component class="view" :is="Component" />
                </keep-alive>
            </router-view>
        </div>
    </a-config-provider>
</template>

<script>
import zh_CN from 'ant-design-vue/lib/locale-provider/zh_CN';
import { watch, onMounted, reactive, toRefs } from 'vue';
import { useStore } from 'vuex';

export default {
    setup() {
        const store = useStore();

        // 状态管理
        const state = reactive({
            includeList: [],
            locale: zh_CN,
        });

        watch(
            () => store.state.$router,
            ({ to }) => {
                if (to.meta?.keepAlive && state.includeList.indexOf(to.name) === -1) {
                    state.includeList.push(to.name);
                }
            }
        );

        onMounted(() => {});

        return {
            ...toRefs(state),
        };
    },
};
</script>

<style lang="less">
// 字体文件
@import '~@/assets/fonts/font.css';
// globalStyle只用于处理全局的样式
@import '~@/assets/less/globalStyle';
// setting.less是用语存储混合和主题变量
</style>
